import React, { Component } from 'react'
import Header from '../common/Header';
import Tab from '../Home/Tab/Tab';
import axios from 'axios';
import AllShop from '../Home/AllShop/AllShop';
import {connect} from 'react-redux';
import { filter_action } from '../../store/store';
class Filter extends Component {
    constructor(){
        super();
        this.state={
            tabList:[],//tab数据
            isShow:true,
            values:''
        }
    }
    componentDidMount(){
         /* 请求Tab组件的数据 */
         axios.get('/getTab').then(res=>{
            this.setState({
                tabList:res.data.list
            })
        })
    }
    inpValue=(item)=>{
        console.log(item);
        if(item){
            this.setState({
                isShow:false
            })
            this.props.fil(item)
        }else{
            this.setState({
                isShow:true
            })
        }
        
    }
    render() {
        return (
            <div className='filter'>
                {/* 头部组件 */}
                <Header title="搜索" left={<span onClick={()=>{this.props.history.push('/home')}}>&lt;</span>} right={<div><span className='iconfont icon-sangedian'></span>|<span className='iconfont icon-cha'></span></div>}></Header>
                <div className="inp-header">
                    <div className='iconfont icon-sousuo'></div>
                    <input type="text" name="" id="" placeholder='输入商家，商品名称' defaultValue={this.state.values} onInput={(e)=>{this.inpValue(e.target.value)}}/>
                    <span>搜索</span>
                </div>
                {this.state.isShow?
                /* 没有搜索的时候 */
                <div className="bigbox">
                    {/* 有用的搜索记录 */}
                <div className="div">
                    <h4>历史搜索</h4>
                    <span className='iconfont icon-trash'></span>
                </div>
                <div className="filter-box">
                    
                </div>
                {/* 页面装饰，没效果 */}
                <div className="div">
                    <h4>搜索发现</h4>
                    <span></span>
                </div>
                <div className="filter-box">
                    <span>麻辣烫</span>
                    <span>米线</span>
                    <span>披萨</span>
                    <span>汉堡</span>
                    <span>烧花鸭</span>
                    <span>四喜丸子</span>
                    <span>红烧狮子头</span>
                </div>
                </div>:
                /* 搜索的时候 */
                <div className="smloe">
                    <Tab  list={this.state.tabList}></Tab>
                    <AllShop></AllShop>
                </div>
                }
            </div>
        )
    }
}
export default connect(
    (state)=>{
        return {

        }
    },
    (dispatch)=>{
        return {
            fil:(item)=>{
                dispatch(filter_action(item))
            }
        }
    }
)(Filter)
